﻿<div class="bg-pattern bg-pattern_vertical"></div>

<div class="container">

    <div class="row" ng-hide="editProject">
        <div class="col-md-12 headline animated bounceInDown">
            <h2>{{project.Title}} <img ng-src="{{project.LogoUrl}}" style="height:100px;width:100px;" /></h2>
        </div>

        <div class="col-md-6 col-sm-6 hidden-xs animated bounceInLeft">
            <wallop-slider data-images="images"
                           data-animation="rotate"
                           data-current-item-index="index"
                           data-on-previous="updateTsPrevious()"
                           data-on-next="updateTsNext()">
            </wallop-slider>
        </div>

        <div class="col-md-6 col-sm-12 animated bounceInRight">
            <h3>
                Project Description
                <button class="pull-right glyphicon-minus" style="background-color:transparent" ng-click="deleteProject(project.Id)" data-ng-show="token && (username=='Admin' || username=='admin')"></button>
                <button class="pull-right glyphicon-pencil" style="background-color:transparent" ng-click="editProject=true" data-ng-show="token && (username=='Admin' || username=='admin')"></button>
            </h3>
            <p style="color:black">{{project.Description}}</p>
            <p style="color:black">Live Website: <a ng-href="/project.windowsAzureUrl">{{project.WindowsAzureUrl}}</a></p>
            <p style="color:black">Code Repository: {{project.CodePlexUrl}}</p>
        </div>

    </div><!-- .row -->
    <div class="row" ng-show="editProject">
        <div>
            <h5><i class="glyphicon glyphicon-th"></i> Create New Item</h5>
            <div class="box-content">
                <form role="form" class="contact__form">
                    <div class="row">
                        <div class="col-xs-6 animated bounceInLeft">
                            Project Title: <input type="text" ng-model="project.Title" class="form-control" placeholder="Project Name" style="width:100%" />
                            Project Description: <textarea ng-model="project.Description" class="form-control" placeholder="Project Description" style="width:100%;max-width:none;"></textarea>
                            Windows Azure Link: <input type="text" ng-model="project.WindowsAzureUrl" class="form-control" placeholder="Project Azure Url" style="width:100%" />
                            Codeplex Link: <input type="text" ng-model="project.CodePlexUrl" class="form-control" placeholder="Project Codeplex Url" style="width:100%" />
                            Logo Url: <input type="text" ng-model="project.LogoUrl" class="form-control" placeholder="Project Logo Url" style="width:100%" />
                        </div>

                        <div class="col-xs-6 animated bounceInRight">
                            <button class="btn-sm btn-danger animated bounceInUp pull-right" ng-click="editProject=false;">cancel</button>
                            <button class="btn-sm btn-success animated bounceInUp pull-right" ng-click="editProject=false;saveChanges(project)">submit</button>
                            <div id="myTabContent" class="tab-content">
                                <div class="tab-pane active" id="info">
                                    <h3>
                                        Add Images
                                        <button class="btn-sm btn-primary glyphicon-plus" ng-click="addImage()"></button>
                                    </h3>
                                    <div ng-repeat="image in project.ImageUrls">
                                        <input type="text" ng-model="image.Url" placeholder="Image Url" style="width:100%" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>

                    </div>
                </form>
            </div>
        </div><!-- .container -->
    </div>
</div>